<style>
  .login-bg{
    width: 100vw;
    height: 100vh;
    background-color: #2A3F54;
    position: fixed;
    top: 0;
    text-align: center;
  }
  .login-content{
    max-width: 330px;
    margin-top: calc(50vh - 150px);
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: #222 0px 5px 20px;
  }
  .ivu-icon{
    font-size: 14px;
  }
</style>
<template>
  <transition name="custom-classes-transition" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
    <div class="login-bg">
      <div class="login-content">
        <h1>Login</h1>

        <i-form ref="formInline" :model="formInline" :rules="ruleInline" inline>
          <Form-item prop="username">
            <Input type="text" v-model="formInline.username" placeholder="Username">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
          </Form-item>
          <Form-item prop="password">
            <Input type="password" v-model="formInline.password" placeholder="Password">
            <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </Input>
          </Form-item>
          <div>
            <Form-item>
              <label >记住帐号:</label>
              <i-switch v-model="formInline.rememberMe">
                <span slot="open">开</span>
                <span slot="close">关</span>
              </i-switch>
            </Form-item>
          </div>


          <Form-item>
            <Button type="primary" @click="handleSubmit('formInline')">登录</Button>
          </Form-item>
        </i-form>
      </div>

    </div>
  </transition>

</template>

<script>


  export default {
    data () {
      return {
        content:"sss",
        formInline: {
          username: 'sys_admin',
          password: 'E10ADC3949BA59ABBE56E057F20F883E',
          rememberMe: false,
        },
        ruleInline: {
          username: [
            { required: true, message: '请填写用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请填写密码', trigger: 'blur' },
            { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.login();
          } else {
            console.log('fail')
          }
        })
      },
      login() {
        this.$auth.login({
          data:this.formInline,
          rememberMe: this.formInline.rememberMe,
          redirect: '/',
          fetchUser: true,
          success: function () {
            console.log(this.$auth);
          }
        });
      }
    }
  }
</script>
